<template>
    <div>
        <Header :left="true" leftText="返回" title="问题产品处置跟踪单号" />
        <div>
            <div style="margin-top: 10px; margin-bottom: 10px;margin-left: 20px;">
                <van-button type="primary" class="buttongroup1" @click="hideSearch" color="#138087">查询条件</van-button>
            </div>
            <div style="height: 15erm" v-if="showeSearch">
                <Form :style="autoHeight">
                    <van-field class="formstyle" v-model="form.PShiftID" name="生产线" label="生产线" placeholder="输入生产线" />
                    <van-field class="formstyle" v-model="form.POrderID" name="生产订单" label="生产订单" placeholder="输入生产订单" />
                </Form>
                <div style="margin-top: 10px; margin-bottom: 20px">
                    <van-button type="primary" class="buttongroup" @click="getMachineAbnormalSubmitedList"
                        color="#138087">查询</van-button>
                </div>
            </div>

            <div class="textScroll" id="textScroll">
                <!-- 循环数据开始 -->
                <div v-for="(item, index) in itemsOne" :key="item.Id" style="position: relative">
                    <div style="width: 100%; background-color: #f3f4f8; height: 5px">
                        <span></span>
                    </div>
                    <div class="divStyle">
                        <van-row style="margin-left: 10px; margin-top: 10px">
                            <van-col span="10"><b>ID :</b></van-col>
                            <van-col span="14">{{ item.Id }}</van-col>
                        </van-row>
                        <van-row style="margin-left: 10px; margin-top: 10px">
                            <van-col span="10"><b>生产线:</b></van-col>
                            <van-col span="14">{{ item.PLineID }}</van-col>
                        </van-row>
                        <van-row style="margin-left: 10px; margin-top: 10px">
                            <van-col span="10"><b>生产订单:</b></van-col>
                            <van-col span="14">{{ item.POrderID }}</van-col>
                        </van-row>

                        <van-row style="margin-left: 10px; margin-top: 10px">
                            <van-col span="10"><b>问题批次号:</b></van-col>
                            <van-col span="12">{{ item.BatchID }}</van-col>
                            <van-col span="2">
                                <van-button style="
                      width: 85px;
                      height: 40px;
                      font-size: 14px;
                      position: absolute;
                      left: 80%;
                    " type="primary" color="#138087" text="选择" @click.stop="seeCheckedDetail(item.Id, item)" />
                            </van-col>
                        </van-row>

                        <!-- <van-row style="margin-left: 10px; margin-top: 10px">
                            <van-col span="10"><b>缺陷描述:</b></van-col>
                            <van-col span="14">{{ getitem(item.QProblemID) }}</van-col>
                        </van-row> -->

                        <!-- <van-row style="margin-left: 10px; margin-top: 10px">
                            <van-col span="10"><b>抽样数量:</b></van-col>
                            <van-col span="14">{{ getitems(item.QProblemID) }}</van-col>
                        </van-row> -->

                    </div>
                    <div>
                        <br />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
  
<script>
import {
    Col,
    Row,
    Form,
    Cell,
    Icon,
    Field,
    NumberKeyboard,
    Image as VanImage,
    Picker,
    popup,
    SubmitBar,
    Button,
    Loading,
    Overlay,
    Dialog,
    tab,
    tabs,
    Toast,
    NoticeBar,
    Tag,
    DatetimePicker,
    ImagePreview,
    CellGroup,
    Uploader,
    Cascader,
    Calendar,
    RadioGroup,
    Radio,
    Divider,
    Stepper,
    AddressList,
    Checkbox,
    CheckboxGroup,
} from "vant";

import "vue-easytable/libs/themes-base/index.css";
import { VTable } from "vue-easytable";
import { _httpClient } from "@/libs/apisie";
import { getToken, getBaseApiFrefix } from "@/libs/auth";
import Header from "@/components/header.vue";
import { storage } from "@/libs/utils";
import { _httpClient as _httpClientApisie } from "@/libs/apisie";
import { _httpClient as _httpClientApi } from "@/libs/api";
import { locales } from "moment";

Vue.use(Form);
Vue.use(Field);
Vue.use(Overlay);
Vue.use(Loading);
Vue.use(tabs);
Vue.use(Picker);
Vue.use(popup);
Vue.use(SubmitBar);
Vue.use(VanImage);
Vue.use(DatetimePicker);
Vue.use(Cascader);
Vue.use(Calendar);
Vue.use(Cell);
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(Divider);
Vue.use(Stepper);
Vue.use(Button);
Vue.use(AddressList);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Col);
Vue.use(Row);
Vue.use(tab);

export default {
    name: "adjustmentdetailsitem",
    components: {
        tab,
        Form,
        Row,
        Col,
        Button,
        Header,
        Form,
        Cell,
        Icon,
        Field,
        NumberKeyboard,
        Dialog,
        Toast,
        NoticeBar,
        Row,
        Tag,
        popup,
        DatetimePicker,
        ImagePreview,
        CellGroup,
        Uploader,
        Col,
        Calendar,
        Cascader,
        Picker,
        RadioGroup,
        Radio,
        Divider,
        Stepper,
        VTable,
        AddressList,
        Checkbox,
        CheckboxGroup,
    },

    data() {
        return {
            sampleAmount: "",
            itemsOne: [],
            itemsOnes: [],
            form: {
                PShiftID: "",
                POrderID: "",
            },
            showeSearch: false,
        };
    },

    created: function () {
        let oldHight = api.winWidth;
        this.screenWidth = oldHight;
        this.getMachineAbnormalSubmitedList();
        // this.filter()
        // this.getMachin();
    },
    async mounted() { },

    methods: {
        getitem(val) {

            for (let index = 0; index < this.itemsOnes.length; index++) {
                if (this.itemsOnes[index].QProblemID == val) {
                    return this.itemsOnes[index].QProblemName;
                }
            }
        },
        async getMachin() {
            let _this = this;
            // alert( _httpClientApisie.getApiPrefix() +
            //         "/MesManage/QualityProblems/GetList");
            Toast.loading({
                mask: true,
                forbidClick: true,
                duration: 0,
                message: "Loading...",
            });
            try {
                let res = await _httpClientApisie.get(
                    _httpClientApisie.getApiPrefix() +
                    "/QualityProblems/GetList"
                );
                if (res.Total == 0) {
                    Toast.clear();
                } else {
                    Toast.clear();
                    // alert(JSON.stringify(res.Data));
                    _this.itemsOnes = res.Data;
                }
            } catch (e) {
                Toast.fail(JSON.stringify(e));
            }
        },
        //查询生产异常管控信息
        async getMachineAbnormalSubmitedList() {
            let _this = this;
            Toast.loading({
                mask: true,
                forbidClick: true,
                duration: 0,
                message: "Loading...",
            });
            try {
                let res = await _httpClient.get(
                    _httpClient.getApiPrefix() +
                    "/QualityDefectReview/GetNotCreateReworkOrderList?NotCreatedReworkOrder=true"
                );
                if (res.Total == 0) {
                    Toast.clear();
                } else {
                    Toast.clear();
                    _this.itemsOne = res.Data;
                }
            } catch (e) {
                Toast.fail(JSON.stringify(e));
            }
        },
        async seeCheckedDetail(a, b) {
            let _this = this;
            // alert(b.LaboratoryCheckRecord)
            // 获取问题产品处置抽样数量
            Toast.clear();
            //alert(b.AppearanceCheckRecord);
            if (b.AppearanceCheckRecord == 0) {
                //alert(1);
                _this.sampleAmount = "0";
                Toast.success("选择完成！");
                api.sendEvent({
                    name: 'cans2',
                    extra: { //可选项,附带的参数。在监听页面的回调里面通过 ret.value 获取。
                        cans2: a,
                        lab: b.LaboratoryCheckRecord,
                        sampleAmount: "0"
                    }
                });
                setTimeout(function () {
                    api.closeWin();
                }, 500);
            }
            else {
                //alert(3);
                try {
                    // alert(_httpClientApisie.getApiPrefix() +
                    //     "/QualityAppearanceCheck/GetEntity?ID=" + b.AppearanceCheckRecord);
                    let res = await _httpClientApisie.get(
                        _httpClientApisie.getApiPrefix() +
                        "/QualityAppearanceCheck/GetEntity?ID=" + b.AppearanceCheckRecord
                    );
                    Toast.clear();
                    //alert(res.Data.SampleAmount);
                    _this.sampleAmount = res.Data.SampleAPlanBoxmount;
                    Toast.success("选择完成！");
                    api.sendEvent({
                        name: 'cans2',
                        extra: { //可选项,附带的参数。在监听页面的回调里面通过 ret.value 获取。
                            cans2: a,
                            lab: b.LaboratoryCheckRecord,
                            sampleAmount: res.Data.PlanBox
                        }
                    });

                    setTimeout(function () {
                        api.closeWin();
                    }, 500);
                } catch (e) {
                    Toast.success("选择完成！");
                    api.sendEvent({
                        name: 'cans2',
                        extra: { //可选项,附带的参数。在监听页面的回调里面通过 ret.value 获取。
                            cans2: a,
                            lab: b.LaboratoryCheckRecord,
                            sampleAmount: "0"
                        }
                    });

                    setTimeout(function () {
                        api.closeWin();
                    }, 500);
                }
            }
        },
        async hideSearch() {
            if (this.showeSearch == false) {
                document.getElementById("textScroll").style.top = "45%";
                this.showeSearch = true;
            } else {
                this.showeSearch = false;
                document.getElementById("textScroll").style.top = "16%";
            }
        },
        formatDate(date) {
            return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
        },
    },
};
</script>
  
<style>
body {
    background-color: white;
}

.table-title-class {
    background-color: #304156;
    color: #fff;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.buttongroup {
    float: right;
    width: 30%;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.buttongroup1 {
    float: left;
    width: 30%;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.container.dwo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.buttonLeft {
    position: fixed;
    bottom: 8px;
    float: left;
    width: 49%;
}

.formstyle {
    font-size: 15px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.radioteam {
    display: flex;
    align-items: center;
    padding-left: 13px;
    margin-top: 10px;
    margin-left: 34px;
    margin-bottom: 10px;
}

.buttonRight {
    position: fixed;
    bottom: 8px;
    float: right;
    left: 51%;
    width: 49%;
    background-color: #f22028;
    border-color: #f22028;
}

.textScroll {
    display: inline-block;
    position: fixed;
    top: 16%;
    bottom: 3rem;
    overflow: scroll;
    right: 10px;
    width: 100%;
    z-index: 1;
}

.message {
    font-size: 15px;
    margin-top: 5px;
    margin-left: -10px;
    font-weight: bold;
}

.mg5 {
    margin-right: 5px;
}

.tag_margin {
    margin: 2px 5px;
}

.card_under {
    height: 100%;
    width: 100%;
    margin: auto;
    background: #ffffff;
    border-radius: 25px;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
}

.card_icon {
    text-align: center;
    /* position: absolute; */
    height: 8rem;
    width: 80%;
    margin: 12% 10%;
    background: rgba(35, 180, 237, 1);
    border-radius: 25px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}

.text {
    font-size: 18px;
    color: #4e4a67;
    margin: 8px auto auto 20px;
    line-height: 1.5rem;
    text-align: justify;
    font-weight: 600;
}

.text_small {
    font-size: 16px;
    color: red;
    margin: 8px auto auto 20px;
    line-height: 1.5rem;
    text-align: justify;
    font-weight: 700;
}

.text_scan {
    font-size: 16px;
    color: #4e4a67;
    margin: auto auto auto 20px;
    line-height: 1.5em;
    text-align: justify;
}

.divStyle {
    /* border: 1px solid #dcdcdc; */
    border-top-width: 3px;
    border-left-width: 3px;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 0px;
}
</style>
  